<script setup lang="ts">
import { computed } from 'vue';
import { useNameStore } from '@/stores/nameStore';
import NameInputForm from '@/components/NameInputForm.vue';
import NameResults from '@/components/NameResults.vue';
import SavedNames from '@/components/SavedNames.vue';

const nameStore = useNameStore();

// 计算属性
const generatedNames = computed(() => nameStore.generatedNames);
</script>

<template>
  <div class="home">
    <!-- 页面头部 -->
    <header class="header">
      <div class="header-content">
        <h1 class="app-title">好名好运AI</h1>
        <p class="app-subtitle">基于五行、生肖的智能取名系统</p>
      </div>
    </header>

    <!-- 主要内容区域 -->
    <main class="main-content">
      <!-- 输入表单区域 -->
      <section class="input-section">
        <NameInputForm />
      </section>

      <!-- 结果展示区域 -->
      <section class="results-section" v-if="generatedNames.length > 0">
        <NameResults />
      </section>

      <!-- 保存的名字区域 -->
      <section class="saved-section">
        <SavedNames />
      </section>
    </main>

    <!-- 页面底部 -->
    <footer class="footer">
      <div class="footer-content">
        <p>&copy; 2024 好名好运AI. 基于中国传统文化，为您提供专业的取名服务。</p>
      </div>
    </footer>
  </div>
</template>

<style scoped>
.home {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  flex-direction: column;
}

.header {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 2rem 0;
  text-align: center;
  color: white;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.app-title {
  font-size: 3rem;
  font-weight: bold;
  margin: 0 0 0.5rem 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.app-subtitle {
  font-size: 1.2rem;
  margin: 0;
  opacity: 0.9;
  font-weight: 300;
}

.main-content {
  flex: 1;
  padding: 2rem 0;
}

.input-section {
  margin-bottom: 3rem;
}

.results-section {
  margin-bottom: 3rem;
}

.saved-section {
  margin-bottom: 3rem;
}

.footer {
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  padding: 1.5rem 0;
  text-align: center;
  color: white;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.footer p {
  margin: 0;
  opacity: 0.8;
  font-size: 0.9rem;
}

@media (max-width: 768px) {
  .app-title {
    font-size: 2rem;
  }
  
  .app-subtitle {
    font-size: 1rem;
  }
  
  .main-content {
    padding: 1rem 0;
  }
  
  .header {
    padding: 1.5rem 0;
  }
  
  .footer {
    padding: 1rem 0;
  }
}
</style>
